.home-user-info-box{
	width: 340px !important;
	padding: 11px 15px 1px 15px !important;
}
.home-content-item-box{
	padding: 0 !important;
	width: 78px !important;
}
.home-user-info {
	border-radius: @rok-border-radius-big;
	height: 100%;
	margin-right: @rok-basic-margin;
	position: relative;
	.task-box {
		width: 100%;
		height: 100%;
		overflow: auto;
		position: relative;
		.task-box-content {
			position: absolute;
			left: 0;
			display: flex;
			width: 100%;
			justify-content: space-between;
			transition: all 1s;
			.content-item {
				cursor: pointer;
				list-style: none;
				width: 345px;
				height: 120px;
				background: @rok-white-bg;
				opacity: 0.8;
				border-radius: 11px;
				float: left;
				text-align: center;
				position: relative;
				padding: 0 12px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 35px;
				.tasks-box-img {
					margin-top: 6px;
					width: 100px;
					height: 48px;
					line-height: 48px;
				}
				.tasks-box-text {
					font-weight: 800;
					font-size  : @rok-font-size-big;
					color      : @rok-text-color;
					line-height: 20px;
					width: 100%;
					display: flex;
					justify-content: center;
					margin-top: 5px;
					.text-icon {
						font-size: 0;
						height: 20px;
					}
				}
				&:last-child {
					margin-right: 0;
				}
				a:hover {
					transform: scale(1.05);
				}
				&-badge {
					.ant-badge-multiple-words {
						padding: 0 5px;
					}
				}
				@keyframes example {
					from {
						margin-left: 0;
					}
					to {
						margin-left: 4px;
					}
				}
				&:hover {
					.tasks-box-text  {
						// color: @rok-primary-hover-color;
						.text-icon {
							font-size: 12px;
							animation-name: example;
							animation-duration: 0.15s;
							margin-left: 4px;
						}
					}
				}
			}
			.content-item:nth-child(5) {
				padding-left: 20px;
			}
		}
		&-left,
		&-right {
			width: 24px;
			height: 24px;
			background: @rok-white-bg;
			border-radius: 50%;
			text-align: center;
			position: absolute;
			top: 50%;
			margin-top: -12px;
			cursor: pointer;
		}
		&-left {
			left: -11px;
		}
		&-right  {
			right: -11px;
		}
	}
}
.icon-title {
	height: 100%;
	width: 120px;
	display: flex;
	justify-content: center;
}

.user-info-number {
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column; /* 确保子元素垂直排列 */
	justify-content: center; /* 在主轴（这里是垂直方向）上居中对齐 */
	align-items: center; /* 在交叉轴（这里是水平方向）上居中对齐 */
	.up-title {
		font-size  : @rok-font-size-base;
		color      : @rok-text-color;
		line-height: 20px;
		width: 100%; /* 子元素的宽度 */
		display: flex;
		justify-content: flex-start; /* 子元素在主轴（水平方向）上起始对齐 */
		align-items: center; /* 子元素在交叉轴（垂直方向）上居中对齐 */
		.item{
			display: flex;
			align-items: center;
			.item-icon{
				font-size: 12px;
				margin-right: 8px;
				transform: scale(0.83);
			}
			.text-icon {
				font-weight: 800;
				font-size  : @rok-font-size-big;
				color: #4c78fc;
				margin-left: 20px;
				width: 60px;
			}
		}

	}
	.down-title {
		font-size  : @rok-font-size-base;
		color      : @rok-text-color;
		line-height: 20px;
		width: 100%; /* 子元素的宽度 */
		display: flex;
		margin-top: 14px;
		justify-content: flex-start; /* 子元素在主轴（水平方向）上起始对齐 */
		align-items: center; /* 子元素在交叉轴（垂直方向）上居中对齐 */
		.item{
			display: flex;
			align-items: center;
			.item-icon{
				font-size: 12px;
				margin-right: 8px;
				transform: scale(0.83);
			}
			.text-icon {
				font-weight: 800;
				font-size  : @rok-font-size-big;
				color      : @rok-text-color;
				margin-left: 20px;
				width: 60px;
				margin-top: 0px;
			}
		}

	}
}

